<template>
	<!-- 盒子 -->
	<div class="box">
		<div class="information">
			<!-- 上面的内容 -->
			<div class="information_top">
				<!-- 上面左边内容 -->
				<div class="inflef">
					<p>精彩推荐</p>
					<span>更多+</span>
					<!-- 三角形 -->
					<div class="Triangle"></div>
					<!-- 划线 -->
					<div class="gang"></div>
					<!-- 数据内容 -->
					<div class="bot_tit">
						<!-- 循环数据即可 -->
						<el-carousel indicator-position="outside" @change='select' ref='carousel'>
							<el-carousel-item v-for="(item, index) in 4" :key="index">
								<img src="../../assets/image/tiao5.png" alt="" />
							</el-carousel-item>
							<div class="imgfov">
								<ul ref='suoyin'>
									<li @click="switchover(0)" class='quanquan'>01</li>
									<li @click="switchover(1)" class='quan'>02</li>
									<li @click="switchover(2)" class='quan'>03</li>
									<li @click="switchover(3)" class='quan'>04</li>
								</ul>
							</div>
						</el-carousel>
						
						
						
						
						
						<!-- 下面的盒子 -->
						<div class="whibot">
							<p>2021年顺义新年文艺活动演出</p>

						</div>
					</div>
				</div>
				<!-- 右侧内容 -->
				<div class="infrig">
					<p>最新资讯</p>
					<span>更多+</span>
					<div class="Triangle"></div>
					<div class="gang"></div>
					<div class="bot_inner">
						<!-- 右上的内容大的 -->
						<div class="top_in">
							<img src="../../assets/image/tiao5.png" alt="" />
							<div class="right_box">
								<h6>2021年顺义区基层文化第二期培训班火热开班</h6>
								<ul>
									<li class="tex1">了解顺义非遗文化，感受独特文化魅力</li>
									<li class="tex2">了解顺义非遗文化，感受独特文化魅力</li>
									<li>
										<span class="iconfont">&#xe62b; &emsp;2020-01-02</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="fo_rbto">
							<!-- 更换循环数据即可 -->
							<!-- 下面的4个 -->
							<div class="simplenessda" v-for="(item,index) in 4" :key="index">
								<div class="qiu"></div>
								<p>看这里！带您了解顺义区非物质文化遗产保护项目</p>
								<span class="iconfont">&#xe62b; &emsp;2020-01-02</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部内容 -->
			<div class="information_botton">
				<ul>
					<li>
						<img src="../../assets/image/文化场馆.png" alt="" />
						<p>分馆展示</p>
					</li>
					<li>
						<img src="../../assets/image/平台须知.png" alt="" />
						<p>游览须知</p>
					</li>
					<li>
						<img src="../../assets/image/预约.png" alt="" />
						<p>场馆预约</p>
					</li>
					<li>
						<img src="../../assets/image/业务图标_班车查询.png" alt="" />
						<p>交通路线</p>
					</li>
					<li>
						<img src="../../assets/image/地图.png" alt="" />
						<p>导览地图</p>
					</li>
					<li>
						<img src="../../assets/image/图层 629 拷贝 3.png" alt="" />
						<p>场馆空间</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	
	export default {
		name: "Homeinformation",
		data(){
			return{
				suoyinzhi: 0
			}
		},
		created() {
			// this.$refs.suoyin.children[0].className  = 'quanquan';
		},
		methods:{
			select(id){
				for(var i=0;i<this.$refs.suoyin.children.length;i++){
					// if(this.$refs.suoyin.children[i].className == '')
					this.$refs.suoyin.children[i].className  = 'quan';
				}
				this.$refs.suoyin.children[id].className  = 'quanquan';
				
			},
			switchover(index){
				this.$refs.carousel.setActiveItem(index)
			}
		}
	};
</script>
<style scoped lang="less">
	
	.box {
		.information {
			width: 100%;
			height: 855px;
			background: url(../../assets/image/矩形背景.png);

			.information_top {
				width: 100%;
				height: 70%;

				.inflef {
					float: left;
					position: relative;
					top: 87px;
					margin-left: 13.5%;
					width: 36.5%;

					p {
						margin-left: 3.6%;
						font-size: 1.25vw;
						float: left;
					}

					span {
						margin-right: 15px;
						margin-top: 16px;
						float: right;
						font-size: 16px;
					}

					.Triangle {
						position: absolute;
						left: 8.21%;
						top: 34px;
						width: 0;
						height: 0;
						border-left: 7px solid transparent;
						border-right: 7px solid transparent;
						border-bottom: 14px solid #333333;
					}

					.gang {
						position: relative;
						top: 46px;
						width: 100%;
						height: 2px;
						border-bottom: 2px solid #333333;
					}

					.bot_tit {
						width: 100%;
						height: 100%;

						.imgfov {
							position: absolute;
							z-index: 99;
							float: right;
							right: 0;
							bottom: 2%;
							width: 20.13%;

							ul {
								width: 100%;
								.quan {
									text-align: center;
									font-size: 0.572vw;
									width: 13.53%;
									height: 20px;
									margin-left: 8.025%;
									float: left;
									background-image: url(../../assets/image/quan.png);
								}
								.quanquan{
									text-align: center;
									font-size: 0.572vw;
									width: 13.53%;
									height: 20px;
									margin-left: 8.025%;
									float: left;
									background-image: url(../../assets/image/quanquan.png);
								}
								
							}

						}

						img {
							margin-top: 25px;
							width: 100%;
							height: 394px;
						}

						.whibot {
							position: absolute;
							bottom: 5px;
							width: 100%;
							height: 49px;
							background-color: white;

							.tittxt {
								margin-top: 5px;
								font-size: 0.937vw;
								color: #333333;
							}
						}
					}
				}

				.infrig {
					float: left;
					width: 34.79%;
					height: 513px;
					position: relative;
					top: 87px;
					margin-left: 0.1rem;

					p {
						margin-left: 3.6%;
						font-size: 1.25vw;
						float: left;
					}

					span {
						margin-right: 15px;
						margin-top: 16px;
						float: right;
						font-size: 16px;
					}

					.Triangle {
						position: absolute;
						left: 8.21%;
						top: 34px;
						width: 0;
						height: 0;
						border-left: 7px solid transparent;
						border-right: 7px solid transparent;
						border-bottom: 14px solid #333333;
					}

					.gang {
						position: relative;
						top: 46px;
						width: 100%;
						height: 2px;
						border-bottom: 2px solid #333333;
					}

					.bot_inner {
						position: absolute;
						width: 100%;
						height: 443px;
						background-color: white;
						bottom: 5px;

						.top_in {
							width: 100%;
							height: 29.79%;
							background-color: white;

							img {
								width: 34.89%;
								height: 100%;
								float: left;
							}

							.right_box {
								float: left;
								width: 65%;
								height: 100%;

								h6 {
									font-size: 0.833vw;
									margin-left: 3.6%;
									margin-top: 13px;
								}

								ul {
									margin-left: 3.6%;
								}

								.tex1 {
									margin-top: 8px;
									font-size: 0.73vw;
								}

								.tex2 {
									margin-top: 5px;
									font-size: 0.73vw;
								}

								.iconfont {
									float: left;
									margin-top: 6px;
									font-size: 0.833vw;
								}
							}
						}

						.fo_rbto {
							width: 100%;
							height: 70.21%;

							.simplenessda {
								width: 100%;
								height: 25%;

								.qiu {
									float: left;
									margin-top: 40px;
									margin-left: 24px;
									width: 5px;
									height: 5px;
									background-color: black;
									border-radius: 50px;
								}

								p {
									font-size: 0.833vw;
									margin-top: 15px;
								}

								span {
									font-size: 0.833vw;
									position: absolute;
									float: left;
									left: 8.1%;
									margin-top: 43px;
								}
							}
						}
					}
				}
			}
		}

		.information_botton {
			width: 100%;
			height: 140px;

			ul {
				width: 84.22%;
				height: 170px;
				margin-left: 15%;
				margin-top: 60px;

				li {
					width: 6.25%;
					height: 100%;
					float: left;
					margin-left: 7.1%;

					img {
						width: 100%;
						height: 100px;
					}

					p {
						margin-left: 12%;
						margin-top: 20px;
						font-size: 0.833vw;
					}
				}
			}
		}
	}
</style>
<style>
span{
	cursor:pointer
}
ul li {
	cursor:pointer
}
p{
	cursor:pointer
}
	.inflef .el-carousel__indicators--horizontal {
		float: right;
		position: relative;
		margin-right: 52.2%;
		bottom: 15px;
		padding: none;
	}

	.information .el-carousel__indicator--horizontal {
		padding: 0;
	}

	.simplenessda:nth-child(2n + 1) {
		background-color: #f6f5f5;
	}
	.inflef .el-carousel__indicators--horizontal{
		width: 16%;
	}
	.information .el-carousel__indicator--horizontal{
		width: 25%;
	}
	.information .el-carousel__indicator--horizontal .el-carousel__button{
		width: 100%;
	}
</style>
